<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>parallel coordinates</title>
		<script src="d3/d3.v3.js"></script>
        <script src="d3/d3.parcoords.js"></script>
        <!--<script src="http://d3js.org/d3.v3.min.js"></script>-->

        <link rel="stylesheet" type="text/css" href="css/d3.parcoords.css">
    </head>
    <body>
        <div id="example" class="parcoords" style="width:1000px;height:150px"></div>

        <script>
// objects
var foods = [
  {name: "Asparagus", protein: 2.2, calcium: 0.024, sodium: 0.002},
  {name: "Butter", protein: 0.85, calcium: 0.024, sodium: 0.714},
  {name: "Coffeecake", protein: 6.8, calcium: 0.054, sodium: 0.351},
  {name: "Pork", protein: 28.5, calcium: 0.016, sodium: 0.056},
  {name: "Provolone", protein: 25.58, calcium: 0.756, sodium: 0.876}
];

// arrays
var cube = [
  [0, 0, 0],
  [1, 0, 0],
  [0, 1, 0],
  [1, 1, 0],
  [0, 0, 1],
  [1, 0, 1],
  [0, 1, 1],
  [1, 1, 1]
];

			var pc = d3.parcoords()("#example")
  					   .data(foods)
  					   .render()
  					   .createAxes();
		</script>
    </body>
</html> 





